<!-- TODO: szc -->
<script setup>
/**
 * @libs
 */
import { nextTick, ref } from 'vue'

/**
 * @data
 */
let compMess = ref({
  "productItems": [
    {
      "cover": "product_1.png",
      "title": "超萌摇滚耳机音乐鸭校园宿舍必备",
      "discountInfo": "买三件打七九折",
      "price": "￥50.00",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    },
    {
      "cover": "product_2.png",
      "title": "丑萌萌胖嘟嘟胡萝卜抱枕暖手必备",
      "discountInfo": "买一件送一件",
      "price": "￥50.00",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    },
    {
      "cover": "product_3.png",
      "title": "可爱趴趴熊熊抱枕卧室居家神器",
      "discountInfo": "满39元减5元",
      "price": "￥50.00",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    },
    {
      "cover": "product_4.png",
      "title": "牛B个性送朋友生日礼物够牛啤够装",
      "discountInfo": "买一件送一件",
      "price": "￥50.00",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    }
  ]
})

const quickViewText = ref("快速预览")

/**
 * 返回指定文件夹下的图片路径
 * @param {String} name 图片名称
 * @returns {String} 图片路径
 */
let getImgUrl = (name) => {
  return new URL(`/src/assets/images/mainImgs/homeImgs/part_7_imgs/${name}`, import.meta.url).href
}

/**
 * 链接跳转事件
 * @param {Boolean} isNewTab 是否新标签跳转
 * @param {String} link 链接地址
 */
let gotoNavtion = (isNewTab, link) => {
  if (isNewTab) {
    window.open(link)
  } else {
    window.location.href = link
  }
}

/**
 * 商品点击事件
 * @param {Boolean} isNewTab 是否新标签跳转 
 * @param {String} link 链接地址
 */
let productClickEvent = (isNewTab, link) => {
  gotoNavtion(isNewTab, link)
}

// 当前第一张图片索引
let currentFirstProductIndex = ref(0)

//是否使用商品动画效果
let useProductAnimation = ref(true)

// 商品显示最大长度
const maxProductItemsShowLength = 4

// 删除标记常量
const DELETE_SIGNS = {
  'none': -1,
  'first': 0,
  'last': 1
}

// 删除标记
let deleteSign = DELETE_SIGNS['none']

// 商品列表样式类
let part7ProductItemsClass = () => {
  let returnObj = {
    transform: `translateX(${-currentFirstProductIndex.value * 3.6}rem)`
  }
  if (useProductAnimation.value) {
    returnObj.transition = "all 0.5s ease-in-out"
  } else {
    returnObj.transition = "none"
  }

  return returnObj
}

// 切换显示商品
let changeShowProductItems = (direction) => {
  if (deleteSign == DELETE_SIGNS['last']) {
    compMess.value['productItems'].pop()
  } else if (deleteSign == DELETE_SIGNS['first']) {
    useProductAnimation.value = false
    currentFirstProductIndex.value--
    compMess.value['productItems'].shift()
  }

  // 商品长度
  const productLength = Object.keys(compMess.value['productItems']).length

  switch (direction) {
    case 'left':
      if (currentFirstProductIndex.value > 0) {
        currentFirstProductIndex.value--
      } else {
        //去掉动画
        useProductAnimation.value = false
        let newProductItem = compMess.value['productItems'][productLength - 1]
        compMess.value['productItems'].unshift(newProductItem)
        currentFirstProductIndex.value++

        setTimeout(() => {//添加在异步队列尾部，在UI更新完成之后再恢复动画，以做到动画效果显现
          useProductAnimation.value = true//恢复动画
          currentFirstProductIndex.value--
          deleteSign = DELETE_SIGNS['last']
        }, 0)
      }
      break;
    case 'right':
      if (currentFirstProductIndex.value + maxProductItemsShowLength < productLength) {
        currentFirstProductIndex.value++
      } else {
        let newProductItem = compMess.value['productItems'][0]
        compMess.value['productItems'].push(newProductItem)
        setTimeout(() => {
          useProductAnimation.value = true
          currentFirstProductIndex.value++
          deleteSign = DELETE_SIGNS['first']
        }, 0)
      }
      break;
  }
}
</script>

<template>
  <div class="part-7-class">
    <!-- 商品列表 -->
    <div class="part-7-product-items-container">
      <div class="part-7-product-items-box">
        <!-- 单个商品卡片 -->
        <div v-for="(item, index) in compMess['productItems']" :key="index" class="part-7-product-items" :style="part7ProductItemsClass()" @click="productClickEvent(item.isNewTab, item.link)">
          <!-- 商品封面 -->
          <div class="part-7-product-cover">
            <img :src="getImgUrl(item.cover)" class="part-7-product-cover-img" alt="">
            <!-- 快速预览按钮 -->
            <div class="part-7-product-items-quickView">
              {{ quickViewText }}
            </div>
          </div>
          <!-- 商品标题 -->
          <div class="part-7-product-items-title">{{ item.title }}</div>
          <!-- 折扣信息 -->
          <div class="part-7-product-items-discountInfo">{{ item.discountInfo }}</div>
          <!-- 商品价格 -->
          <div class="part-7-product-items-price">{{ item.price }}</div>
        </div>
      </div>
      <!-- 左右箭头 -->
      <div class="part-7-product-items-left-arrow" @click="changeShowProductItems('left')">
        <!-- 左箭头图标 -->
        <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8.70711 15.2929C9.09763 15.6834 9.09763 16.3166 8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071L0.585786 10C0.195262 9.60948 0.195262 8.97632 0.585786 8.58579L7.29289 1.87868C7.68342 1.48826 8.31658 1.48826 8.70711 1.87868C9.09763 2.26921 9.09763 2.89237 8.70711 3.2829L2.34315 9.64686L8.70711 15.2929Z" fill="currentColor"/>
        </svg>
      </div>
      <div class="part-7-product-items-right-arrow" @click="changeShowProductItems('right')">
        <!-- 右箭头图标 -->
        <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.29289 15.2929C0.902367 15.6834 0.902367 16.3166 1.29289 16.7071C1.68342 17.0976 2.31658 17.0976 2.70711 16.7071L9.41421 10C9.80474 9.60948 9.80474 8.97632 9.41421 8.58579L2.70711 1.87868C2.31658 1.48826 1.68342 1.48826 1.29289 1.87868C0.902367 2.26921 0.902367 2.89237 1.29289 3.2829L7.65685 9.64686L1.29289 15.2929Z" fill="currentColor"/>
        </svg>
      </div>
    </div>
  </div>
</template>
<style scoped>
/**
 * 整体容器样式
 */
.part-7-class {
  width: 15.88rem; 
  margin: 0 auto; 
  height: 4.86rem; 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  cursor: pointer; /* 鼠标悬停时显示指针 */
  margin-top: 1rem; 
}

/**
 * 商品列表容器样式
 */
.part-7-product-items-container {
  position: relative; /* 相对定位 */
  width: 15.88rem; 
}

.part-7-product-items-box {
  width: 14rem; 
  display: flex; /* 使用弹性布局 */
  flex-direction: row; /* 水平排列子元素 */
  justify-content: space-between; /* 子元素之间等间距分布 */
  height: 4.86rem;
  position: relative; /* 相对定位 */
  overflow: hidden; /* 内容超出部分隐藏 */
  margin: 0 auto; /* 居中对齐 */
}

/**
 * 单个商品卡片样式
 */
.part-7-product-items {
  height: 4.86rem; 
  width: 3.2rem;
  border-radius: 0.32rem; 
  position: relative; /* 相对定位 */
  display: flex; /* 使用弹性布局 */
  flex-direction: column; /* 垂直排列子元素 */
  margin-right: 0.4rem; 
}

/**
 * 最后一个商品卡片不设置右边距
 */
.part-7-product-items:last-child {
  margin-right: 0;
}

/**
 * 商品封面容器样式
 */
.part-7-product-cover {
  position: relative; /* 相对定位 */
}

/**
 * 商品封面图片样式
 */
.part-7-product-cover-img,
.part-7-product-cover {
  width: 3.2rem; 
  height: 3.2rem; 
  border-radius: 0.32rem; /* 圆角设置 */
  object-fit: cover;
  object-position: center; /* 图片位置居中 */
  overflow: hidden; /* 内容超出部分隐藏 */
}

/**
 * 快速预览按钮样式
 */
.part-7-product-items-quickView {
  position: absolute; /* 定位方式为绝对定位 */
  bottom: 0; 
  width: 3.20rem;
  height: 0.4rem; 
  border-radius: 0 0 0.32rem 0.32rem; 
  text-align: center;
  background-color: rgba(0, 0, 0, .4); /* 背景颜色为半透明黑色 */
  color: #fff; 
  font-size: 0.16rem;
  line-height: 0.4rem; 
  display: none; /* 默认隐藏 */
}

/**
 * 当商品封面被悬停时显示快速预览按钮
 */
.part-7-product-cover:hover .part-7-product-items-quickView {
  display: block; /* 显示快速预览按钮 */
}

/**
 * 商品标题样式
 */
.part-7-product-items-title {
  margin-top: 0.24rem; 
  width: 2.88rem; 
  height: 0.36rem; 
  font-weight: 400;
  font-size: 0.24rem; 
  line-height: 0.36rem; 
  text-align: left; 
  overflow: hidden; /* 内容超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 强制文本不换行 */
}

/**
 * 商品折扣信息样式
 */
.part-7-product-items-discountInfo {
  margin-top: 0.1rem; 
  background-color: #6BC2B422; 
  border-radius: 0.06rem; 
  height: 0.3rem; 
  width: fit-content; 
  text-align: center; 
  line-height: 0.3rem; 
  box-sizing: border-box; 
  padding: 0 0.07rem; 
  font-size: 0.16rem; 
  font-weight: 300; 
  color: #6BC2B4; 
}

/**
 * 商品价格样式
 */
.part-7-product-items-price {
  margin-top: 0.7rem; 
  height: 0.26rem; 
  font-weight: 700; 
  max-width: 3.2rem; 
  color: #E00000; 
  font-size: 0.24rem; 
  line-height: 0.26rem; 
  text-align: left; 
}

/**
 * 左右箭头图标样式（公共部分）
 */
.part-7-product-items-right-arrow,
.part-7-product-items-left-arrow {
  position: absolute; /* 绝对定位 */
  width: 0.54rem; 
  height: 0.54rem; 
  background-color: transparent; /* 背景颜色为透明 */
  border-radius: 50%; 
  border: #6BC2B4 solid 0.01rem; /* 白色实线边框 */
  top: 50%; 
  transform: translateY(-50%); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  cursor: pointer; 
  color: #6BC2B4; 
}

/**
 * 左箭头图标样式
 */
.part-7-product-items-left-arrow {
  left: 0rem; 
}

/**
 * 右箭头图标样式
 */
.part-7-product-items-right-arrow {
  right: 0rem; 
}

/**
 * 当左右箭头被悬停时的样式
 */
.part-7-product-items-left-arrow:hover,
.part-7-product-items-right-arrow:hover {
 /* 颜色变为白色,并继承到svg */ 
 color: #fff; 
  background-color: #6BC2B4;
}
</style>